/**
表单生成器样式，这里的样式只针对于此组件在外部组件中的通用样式
 */
.atom-form-maker {
  width: 100%;
  height: 100%;
  /*暗黑模式下样式兼容*/
  &.dark {
    .atom-widget-panel {
      .ant-collapse-borderless {
        .atom-widget-list .atom-widget {
          background: @primary-8;
          border-color: @primary-8;
          &:hover, &:focus {
            background: @primary-color;
            border: 1px dashed @primary-color;
            color: @text-color;
          }
        }
      }
    }
    /*中间画布面板区域*/
    .atom-maker-panel {
      /*功能按钮的响应*/
      .atom-maker-header {
        .atom-maker-header-left {
          .ant-btn-icon-only {
            &.active {
              background: @primary-8;
            }
          }
        }
      }
      /*画布区域*/
      .atom-maker-canvas-panel {
        .atom-maker-canvas {
          /*drop时的样式*/
          .atom-widget-ghost {
            background: @primary-8;
            border: 1px dashed @primary-8;
            color: @text-color;
          }
        }
      }
    }
  }
  /*左侧组件面板区域*/
  .atom-widget-panel {
    overflow: auto;
    /*普通模式样式*/
    .ant-collapse-borderless {
      background-color: @component-background;
      user-select: none;
      /*组件item样式*/
      .atom-widget-list {
        display: flex;
        flex-flow: row wrap;
        padding: 0;
        justify-content: space-between;
        margin-bottom: 0;
        .atom-widget {
          width: 48%;
          max-width: 48%;
          background: @primary-1;
          border: 1px solid @primary-1;
          line-height: 26px;
          padding: 0 8px;
          margin-bottom: 8px;
          font-size: 13px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: move;
          .anticon {
            margin-right: 6px;
          }
          &:hover, &:focus {
            border: 1px dashed @primary-color;
            color: @primary-color;
          }
        }
      }
    }
  }
  /*中间画布面板区域*/
  .atom-maker-panel {
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 3px 0 @border-color-base;
    /*功能按钮的响应*/
    .atom-maker-header {
      padding: 6px 8px;
      background: @component-background;
      box-shadow: 0 2px 2px @border-color-base;
      .atom-maker-header-left {
        .ant-btn-icon-only {
          width: auto;
          padding: 4px 6px;
          &.active {
            background: @primary-3;
          }
          .anticon {
            font-size: 20px;
          }
        }
      }
      .atom-maker-header-right {
        line-height: 32px;
        text-align: right;
        .ant-btn-icon-only {
          width: auto;
          padding: 4px 6px;
          .anticon {
            font-size: 20px;
          }
        }
      }
    }
    .atom-maker-canvas-panel {
      flex: 1;
      position: relative;
      overflow: auto;
      /* 默认mac pc画布*/
      .atom-maker-canvas {
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 8px;
        right: 8px;
        background: @component-background;
        overflow: auto;
        padding: 8px;
        .atom-title {
          display: block;
          margin: 0 auto 24px;
        }
        .ant-form {
          position: relative;
          width: 100%;
          min-height: 100%;
          margin: 0 auto;
          /*表单元素的主样式*/
          .atom-maker-item {
            border: 1px dashed transparent;
            border-radius: 2px;
            cursor: move;
            position: relative;
            margin-bottom: 2px;
            .atom-maker-actions {
              position: absolute;
              right: 0;
              bottom: 0;
              .ant-btn {
                border-radius: 0;
              }
            }
            .ant-form-item-label > label {
              cursor: move;
            }
            /*当前选中的节点*/
            &.active {
              outline: 2px solid @primary-color !important;
            }
            /*当前hover的节点*/
            &:hover {
              outline: 2px dashed @primary-color;
            }
            /*布局表单内容*/
            &.layout {
              &>.ant-form-item {
                margin-bottom: 0;
              }
              /*表单内容*/
              .ant-form-item-control-input-content {
                /*内部表单的统一样式*/
                .atom-maker-inner-form {
                  border: 2px solid @border-color-split;
                  min-height: 58px;
                  /*内部表单元素样式*/
                  .atom-maker-item {
                    border: 1px solid @border-color-base;
                  }
                }
                /*栅格布局*/
                &>.ant-row {
                  padding: 4px;
                  &>.ant-col {
                    padding: 4px;
                    border: 1px dashed @border-color-split;
                    &:hover {
                      border: 1px dashed @primary-color;
                    }
                  }
                }
                /*表格布局*/
                &>table {
                  table-layout: fixed;
                  tr {
                    td {
                      padding: 4px;
                      border: 1px dashed @border-color-split;
                      &:hover {
                        outline: 1px dashed @primary-color;
                      }
                    }
                  }
                }
                /*标签布局*/
                &>.ant-tabs {}
              }
            }
          }
        }
        /*pad画布*/
        &.pad {
          top: 16px;
          bottom: 16px;
          left: 16px;
          right: 16px;
          border-radius: 5px;
        }
        /*phone画布*/
        &.phone {
          width: 375px;
          margin: 0 auto;
          border-radius: 12px;
        }
        /*空值样式*/
        .ant-empty {
          position: absolute;
          margin: 0 auto;
          width: 100%;
          top: 120px;
          .ant-empty-description {
            color: @text-color-secondary;
          }
        }
        /*drop时的样式*/
        .atom-widget-ghost {
          background: @primary-1;
          border: 1px dashed @primary-color;
          color: @primary-color;
          line-height: 26px;
          padding: 0 8px;
          margin-bottom: 8px;
          font-size: 13px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .anticon {
            margin-right: 6px;
          }
        }
      }
    }
  }
  /*右侧配置面板区域*/
  .atom-config-panel {
    /*tab页基本样式*/
    .ant-tabs {
      height: 100%;
      .ant-tabs-bar {
        margin: 0;
        .ant-tabs-nav .ant-tabs-tab {
          width: 140px;
          margin: unset;
          text-align: center;
        }
      }
      .ant-tabs-content {
        height: 100%;
        .ant-tabs-tabpane {
          max-height: 100%;
          overflow: auto;
          padding-bottom: 16px;
          .atom-form {
            .ant-card-body {
              padding: 16px 8px;
            }
            /*滑动条的tooltip z-index不能高于drawer*/
            .ant-slider {
              .ant-slider-tooltip {
                z-index: 999;
              }
            }
          }
          .ant-empty {
            margin-top: 128px;
            .ant-empty-description {
              color: @text-color-secondary;
            }
          }
        }
      }
    }
  }
}
